

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick">
      <el-tab-pane label="药品总库存" name="medicinesTab">
        <!-- 查询条件开始 -->
        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
          <el-form-item label="药品名称" prop="medicinesName">
            <el-input
                v-model="queryParams.data.medicinesName"
                placeholder="请输入药品名称"
                clearable
                size="small"
                style="width:180px"
            />
          </el-form-item>
          <el-form-item label="关键字" prop="keywords">
            <el-input
                v-model="queryParams.data.keywords"
                placeholder="请输入关键字"
                clearable
                size="small"
                style="width:180px"
            />
          </el-form-item>
          <el-form-item label="药品类型" prop="medicinesType">
            <el-select
                v-model="queryParams.data.medicinesType"
                placeholder="药品类型"
                clearable
                size="small"
                style="width:180px"
            >
              <el-option
                  v-for="dict in medicinesTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="生产厂家" prop="producterId">
            <el-select
                v-model="queryParams.data.producterId"
                placeholder="生产厂家"
                clearable
                size="small"
                style="width:180px"
            >
              <el-option
                  v-for="dict in producterOptions"
                  :key="dict.producerId"
                  :label="dict.producerName"
                  :value="dict.producerId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="处方类型" prop="prescriptionType">
            <el-select
                v-model="queryParams.data.prescriptionType"
                placeholder="处方类型"
                clearable
                size="small"
                style="width:180px"
            >
              <el-option
                  v-for="dict in prescriptionTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
                v-model="queryParams.data.dateRange"
                size="small"
                style="width:240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholde="开始日期"
                end-placeholde="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->

        <!-- 数据表格开始 -->
        <el-table  border :data="medicinesTableList">
          <el-table-column label="药品ID" align="center" prop="medicinesId" />
          <el-table-column label="药品名称" align="center" prop="medicinesName" />
          <el-table-column label="药品编号" align="center" prop="medicinesNumber" />
          <el-table-column label="生产厂家" width="280px" align="center" prop="producterId" :formatter="producterFormatter" />
          <el-table-column
              prop="medicinesType"
              min-width="120"
              fixed="right"
              label="药品类型">
            <template v-slot="{row}">
              <div v-for="item in  medicinesTypeOptions"
                   :key="item.dictValue"
                   :disabled="row.medicinesType===1">
                <span v-if="item.dictValue === row.medicinesType">
                  {{item.dictLabel}}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="prescriptionType"
              min-width="120"
              fixed="right"
              label="处方类型">
            <template v-slot="{row}">
              <div v-for="item in  prescriptionTypeOptions" :key="item.dictValue" :disabled="row.prescriptionType===1">
                        <span v-if="item.dictValue === row.prescriptionType">
                            {{item.dictLabel}}
                        </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="关键字" align="center" prop="keywords" />
          <el-table-column label="库存量" align="center" prop="medicinesStockNum" />
          <el-table-column label="预警值" align="center" prop="medicinesStockDangerNum" />
          <el-table-column

              prop="status"
              min-width="120"
              fixed="right"
              label="状态">
            <template v-slot="{row}">
              <div v-if="row.medicinesStockNum>2*row.medicinesStockDangerNum">
                <el-tag type="success">
                  正常
                </el-tag>
              </div>
              <div v-else-if="(row.medicinesStockNum>row.medicinesStockDangerNum)&&(row.medicinesStockNum<=2*row.medicinesStockDangerNum)">
                <el-tag type="warning">
                  请及时补充
                </el-tag>
              </div>
              <div v-else-if="(row.medicinesStockNum<row.medicinesStockDangerNum)">
                <el-tag type="danger">
                  库存不足
                </el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 数据表格结束 -->

        <!--分页  -->
        <el-pagination
            :current-page="pageNo"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />


      </el-tab-pane>
      <el-tab-pane label="批次库存及价格" name="inventoryLogTab">
        <!-- 查询条件开始 -->
        <el-form ref="queryLogForm" :model="queryLogParams" :inline="true" label-width="88px">
          <el-form-item label="采购单据号" prop="purchaseId">
            <el-input
                v-model="queryLogParams.data.purchaseId"
                placeholder="采购单据号"
                clearable
                size="small"
                style="width:180px"
            />
          </el-form-item>
          <el-form-item label="药品名称" prop="medicinesName">
            <el-input
                v-model="queryLogParams.data.medicinesName"
                placeholder="请输入药品名称"
                clearable
                size="small"
                style="width:180px"
            />
          </el-form-item>
          <el-form-item label="药品类型" prop="medicinesType">
            <el-select
                v-model="queryLogParams.data.medicinesType"
                placeholder="药品类型"
                clearable
                size="small"
                style="width:180px"
            >
              <el-option
                  v-for="dict in medicinesTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="生产厂家" prop="producterId">
            <el-select
                v-model="queryLogParams.data.producterId"
                placeholder="生产厂家"
                clearable
                size="small"
                style="width:180px"
            >
              <el-option
                  v-for="dict in producterOptions"
                  :key="dict.producerId"
                  :label="dict.producerName"
                  :value="dict.producerId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="处方类型" prop="prescriptionType">
            <el-select
                v-model="queryLogParams.data.prescriptionType"
                placeholder="处方类型"
                clearable
                size="small"
                style="width:180px"
            >
              <el-option
                  v-for="dict in prescriptionTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
                v-model="queryLogParams.data.dateRange"
                size="small"
                style="width:240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholde="开始日期"
                end-placeholde="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->

        <!-- 数据表格开始 -->
        <el-table  :data="inventoryLogTableList">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="入库号">
                  <span>{{ props.row.inventoryLogId }}</span>
                </el-form-item>
                <el-form-item label="单据号">
                  <span>{{ props.row.purchaseId }}</span>
                </el-form-item>
                <el-form-item label="规格">
                  <span>{{ props.row.conversion }}{{ props.row.unit }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="药品ID" align="center" prop="medicinesId" />
          <el-table-column label="药品名称" align="center" prop="medicinesName" />
          <el-table-column label="采购量" align="center" prop="inventoryLogNum" />
          <el-table-column label="批发价" align="center" prop="tradePrice">
            <template slot-scope="scope">
              <span>{{ scope.row.tradePrice|rounding }}</span>
            </template>
          </el-table-column>
          <el-table-column label="批发额" align="center" prop="tradeTotalAmount">
            <template slot-scope="scope">
              <span>{{ scope.row.tradeTotalAmount|rounding }}</span>
            </template>
          </el-table-column>
          <el-table-column label="批次号" align="center" prop="batchNumber" />
          <el-table-column label="生产厂家" width="280px" align="center" prop="producterId" :formatter="producterFormatter" />
          <el-table-column
              prop="medicinesType"
              min-width="120"
              fixed="right"
              label="药品类型">
            <template v-slot="{row}">
              <div v-for="item in  medicinesTypeOptions" :key="item.dictValue" :disabled="row.medicinesType===1">
                        <span v-if="item.dictValue === row.medicinesType">
                            {{item.dictLabel}}
                        </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="prescriptionType"
              min-width="120"
              fixed="right"
              label="处方类型">
            <template v-slot="{row}">
              <div v-for="item in  prescriptionTypeOptions" :key="item.dictValue" :disabled="row.prescriptionType===1">
                        <span v-if="item.dictValue === row.prescriptionType">
                            {{item.dictLabel}}
                        </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="入库时间" width="180px" align="center" prop="createTime" />
        </el-table>
        <!-- 数据表格结束 -->

        <el-pagination
            :current-page="pageNo"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalLog"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </el-tab-pane>
    </el-tabs>
  </div>

</template>
<script>
export default {
  filters: {
    rounding(value) {
      //  return value.toFixed(2);
      return value
    }
  },
  data() {
    return {
      // 当前激活的tab
      activeName: 'medicinesTab',
      // 药品总
      medicinesTableList: [],
      // 批次库存
      inventoryLogTableList: [],

      // 状态
      statusOptions: [],
      // 药品
      medicinesTypeOptions: [],
      // 生产厂家
      producterOptions: [],
      // 处方类型
      prescriptionTypeOptions: [],

      // 药品查询参数
      queryParams: {
        pageNo: undefined,
        //每页的大小
        pageSize: undefined,
        data: {},
        // medicinesName: undefined,
        // medicinesType: undefined,
        // prescriptionType: undefined,
        // producterId: undefined
      },
      // 入库详情查询参数
      queryLogParams: {
        pageNo: undefined,
        //每页的大小
        pageSize: undefined,
        data: {},
        // purchaseId: undefined,
        // medicinesName: undefined,
        // medicinesType: undefined,
        // prescriptionType: undefined,
        // producterId: undefined,
        // dateRange: undefined
      },

      pageNo: 1,
      //每页的大小
      pageSize: 5,
      total: 0,
      totalLog: 0,
    }
  },
  created() {
    this.loadTable()
    // //查询状态
    // this.$http.get("/stockRemoteDictData/queryByDictType?dictType="+'sys_normal_disable').then(result => {
    //   this.statusOptions = result.data;
    // })

    //生产厂家
    this.$http.get("/producer/getAll").then(result => {
      this.producterOptions = result.data.data.data;
      // console.log(this.producterOptions)
    })

    //   药品类
    this.$http.get("/stockRemoteDictData/queryByDictType?dictType="+'his_medicines_type').then(result => {
      this.medicinesTypeOptions = result.data;
    })

    //处方类
    this.$http.get("/stockRemoteDictData/queryByDictType?dictType="+'his_prescription_type').then(result => {

      this.prescriptionTypeOptions = result.data;
    })
  },
  methods: {
    // 点击tab调用的事件
    handleClick(tab, event) {
      if (this.activeName === 'medicinesTab') {
        this.loadTable()
      } else if (this.activeName === 'inventoryLogTab') {
        this.getInventoryLogList()
      }
    },

    // 查询全部：
    loadTable() {
      // this.loading = true; // 打开遮罩
      this.queryParams.pageNo = this.pageNo;
      this.queryParams.pageSize = this.pageSize;
      this.$http.post("/medicines/inventoryInquiryAllMedicines", this.queryParams).then(res => {
        // console.log(res.data.data)
        this.medicinesTableList = res.data.data.list;
        this.total = res.data.data.total;
      })
    },

    //批次库存及价格
    getInventoryLogList() {
      this.queryLogParams.pageNo = this.pageNo;
      this.queryLogParams.pageSize = this.pageSize;
      this.$http.post("/inventoryLog/queryByPageAllLotAvailabilityAndPrice", this.queryLogParams).then(res => {
        // console.log(res.data.data)
        this.inventoryLogTableList = res.data.data.list;
        this.totalLog = res.data.data.total;
      })

    },


    // 翻译生产厂家
    producterFormatter(row) {
      let name = ''
      this.producterOptions.filter(item => {
        // console.log(item)
        if (parseInt(item.producerId) === parseInt(row.producterId)) {
          name = item.producerName
        }
      })
      return name
    },


    // 分页pageSize变化时触发
    handleSizeChange(val) {
      if (this.activeName === 'medicinesTab') {
        this.pageSize = val;
        // 重新查询
        this.loadTable();
      } else if (this.activeName === 'inventoryLogTab') {
        this.pageSize = val;
        this.getInventoryLogList();
      }
    },


    // 点击上一页  下一页，跳转到哪一页面时触发
    handleCurrentChange(val) {
      if (this.activeName === 'medicinesTab') {
        this.pageNo = val;
        // 重新查询
        this.loadTable();
      } else if (this.activeName === 'inventoryLogTab') {
        this.pageNo = val;
        this.getInventoryLogList();
      }
    },

    // 条件查询
    handleQuery() {
      if (this.activeName === 'medicinesTab') {
        this.loadTable();
      } else if (this.activeName === 'inventoryLogTab') {
        this.getInventoryLogList();
      }
    },
    // 重置查询条件
    resetQuery() {
    //   if (this.activeName === 'medicinesTab') {
    //     this.queryParams = {};
    //     this.loadTable();
    //   } else if (this.activeName === 'inventoryLogTab') {
    //     this.queryLogParams = {};
    //     this.getInventoryLogList();
    //   }
      //页面刷新
      location.reload();
    },
  }
}

</script>

<style scoped>

</style>